現在行の左端にPopup Menuもどきを表示する
/shokai/helpfeel記法 カッコ閉じ忘れチェッカー（event版）のUIをベースに、選択範囲無しでボタンなどを表示できるPopupMenuもどきを作ってみる
2021-07-29
20:58:09 ボタンも表示してみた
https://gyazo.com/39bc445fc8f984112c8efe6ce1374075
20:37:28 いい感じ
https://gyazo.com/d58e5df5520c67c8b0d57515a30213b1
code:js
import("/api/code/takker/現在行の左端にPopup_Menuもどきを表示する/test.js");
code:test.js
let cursorLine = document.getElementsByClassName('cursor-line')?.0;
const container = createPopupContainer();
const editor = document.getElementById('editor');
editor.append(container);
const textInput = document.getElementById('text-input');
const observer = new MutationObserver(() =>
container.style.top = ${parseInt(textInput.style.top) + parseInt(textInput.style.height)}px
);
observer.observe(document.getElementsByClassName('lines')0, {attributes: true, subtree: true, attributeFilter: 'class'});
↑cf. /programming-notes/.cursor-lineの変更を検知する#60f0ca2b1280f00000f6f800
code:test.js
function createPopupContainer() {
const popupMenu = document.createElement('div');
popupMenu.attachShadow({mode: 'open'});
popupMenu.shadowRoot.innerHTML = `
<style>
:host {
position: absolute;
left: 0px;
width:100%;
z-index:300;
user-select:none;
font-family:"Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif;
pointer-events:none
}
.button-container {
position: relative;
display:inline-block;
max-width:70vw;
min-width:80px;
text-align:center;
background-color:#111;
padding:0 1px;
border-radius:4px;
pointer-events:auto
}
</style>
<div class="button-container">Sample Text</div>
`;
return popupMenu;
}
code:js
import("/api/code/takker/現在行の左端にPopup_Menuもどきを表示する/test2.js");
code:test2.js
let cursorLine = document.getElementsByClassName('cursor-line')?.0;
const {popupMenu, render} = createPopupContainer();
const editor = document.getElementById('editor');
editor.append(popupMenu);
render("Send", "👎scrapbox", "👍Keicho", "👍Keichoに話しかけたい", "👍話しかけたい");
const cursor = document.getElementsByClassName('cursor')0;
const observer = new MutationObserver(() =>
popupMenu.style.top = ${parseInt(cursor.style.top) + parseInt(cursor.style.height) + 4}px
);
observer.observe(document.getElementsByClassName('lines')0, {attributes: true, subtree: true, attributeFilter: 'class'});
function createPopupContainer() {
const popupMenu = document.createElement('div');
popupMenu.attachShadow({mode: 'open'});
popupMenu.shadowRoot.innerHTML = `
<style>
:host {
position: absolute;
left: 0px;
width:100%;
z-index:300;
user-select:none;
font-family:"Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif;
pointer-events:none
}
.button-container {
position: relative;
display:inline-block;
max-width:70vw;
min-width:80px;
text-align:center;
background-color:#111;
padding:0 1px;
border-radius:4px;
pointer-events:auto
}
htmldata-os*='android' .button-container {
max-width:90vw
}
htmldata-os*='ios' .button-container {
max-width:90vw
}
.button {
font-size:11px;
color:#eee;
cursor:pointer;
display:inline-block;
padding:0 5px
}
.button:not(:first-of-type) {
border:0;
border-left:1px solid #eee
}
.button.selected {
background-color:#222;
text-decoration:underline
}
htmldata-os*='android' .button {
font-size:13px;
padding:6px;
min-width:12vw
}
htmldata-os*='ios' .button{
font-size:13px;
padding:6px;
min-width:12vw
}
.button div.icon {
height:2em;
max-width:10em;
display:inline-block;
overflow:hidden;
margin-left:1px;
vertical-align:top
}
.button div.icon img {
max-height:100%;
vertical-align:unset
}
</style>
<div class="button-container"></div>
`;
const buttonContainer = popupMenu.shadowRoot.lastElementChild;
return {
popupMenu,
render(buttons) {
buttonContainer.textContent = '';
buttonContainer.insertAdjacentHTML('beforeend', buttons.map(button => `
<div class="button">${button}</div>
`).join(''));
},
};
}
#2021-07-29 20:00:34